<template>
  <div class="box">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectChange"
    >
      <!-- 复选框列
              复选框列和索引列因为有的显示有的不显示，所以我们使用一个v-if去控制它，
              v-if的标识取决于父组件（引用这个组件的组件）传递过来的标识。子组件也就是
              我们封装的这个myTable组件用props接收一下又因为复选框要有勾选时间所以
              @select-change事件不能落下
       -->
      <el-table-column
        v-if="isShowCheckbox == true"
        type="selection"
        width="48"
        fixed
      ></el-table-column>
      <!-- 索引列 -->
      <el-table-column
        v-if="isShowIndex == true"
        label="序号"
        type="index"
        width="50"
        fixed
      >
      </el-table-column>
      <!-- 主内容列
              主内容列的表头就是label，表头列对应的数据就是prop，所以父组件可以传递过来
              一个数组，里面的每一项就是label的名字和prop对应的值。通过v-for就动态了
      -->
      <el-table-column
        :prop="item.propName"
        :label="item.labelName"
        v-for="(item, index) in tableHeaderTitle"
        :key="index"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'jz-table',
  props: {
    // 父组件传递过来的表头的数组数据
    tableHeaderTitle: {
      type: Array,
      default() {
        return []
      }
    },
    // 父组件传递过来的表内容的数组数据
    //  注意：表头内容数据和表内容数据有关联的
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    // 父组件传递过来的是否展示复选框列的标识
    isShowCheckbox: {
      type: Boolean,
      default: false
    },
    // 父组件传递过来的是否展示序号索引列的标识
    isShowIndex: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 勾选以后，要把勾选的这一行的数据传递给父组件，以供使用
    handleSelectChange(checked) {
      this.$emit('receiveCheckedData', checked)
    }
  }
}
</script>
<style lang="less" scoped>
</style>
